<div class="form-group single_query internal-query col-xs-12 query-{{queryIndex}}-{{internalIndex}}" [ngClass]="{query_complete: query.field !== '' && query.query !== ''}">
	<div class="action-btn-group">
		<a href="javascript:void(0)" (click)="removeQuery()" class="btn btn-grey add_condition_delete">
			<i class="fa fa-times"></i>
		</a>
	</div>
	<!-- field part start -->
	<editable class="col-xs-3 pd-l0 field-select" [editableField]="query.selectedField" [editPlaceholder]="'field'" [editableInput]="'select2'" [result]="result" [selectOption]="result.resultQuery.availableFields" [querySelector]="querySelector"  [selector]="selector.field" (callback)="analyzeTest($event)"></editable>
	<!-- field part end -->
	<!-- query part start -->
	<div class="col-xs-3 pd-l0"  
		*ngIf="query.analyzeTest != '' && (queryList.allowedDataTypes.indexOf(query.field.type) > -1)">
		<editable class="query-select" 
			[editableField]="query.selectedQuery" 
			[editPlaceholder]="'query'" 
			[editableInput]="'select2'" 
			[result]="result" 
			[selectOption]="queryList[query.analyzeTest][query.type]" 
			[querySelector]="querySelector"  
			[selector]="selector.query" 
			[informationList]="informationList"  
			(callback)="queryCallback($event)" 
			(setDocSample)="setDocSampleEve($event);"
			[showInfoFlag]="true"></editable>
	</div>
	<!-- query part end -->
	<!-- load the slector for selected query -->
		
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'match'" class="row">
		<match-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector"  
			(getQueryFormat)="getQueryFormat($event);"
			>
		</match-query>
	</div>
	<!-- match query end -->

	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'match_phrase'" class="row">
		<match_phrase-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</match_phrase-query>
	</div>
	<!-- match query end -->

	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'match_phrase_prefix'" class="row">
		<match-phase-prefix-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</match-phase-prefix-query>
	</div>
	<!-- match query end -->
	
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'range'" class="row">
		<range-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</range-query>
	</div>
	<!-- match query end -->
	
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'gt'" class="row">
		<gt-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</gt-query>
	</div>
	<!-- match query end -->
	
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'lt'" class="row">
		<lt-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</lt-query>
	</div>
	<!-- match query end -->
	
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'term'" class="row">
		<term-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</term-query>
	</div>
	<!-- match query end -->
	
	<!-- match query start -->
	<div [hidden]="query.selectedQuery != 'terms'" class="row">
		<terms-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</terms-query>
	</div>
	<!-- match query end -->
	
	<!-- prefix query start -->
	<div [hidden]="query.selectedQuery != 'prefix'" class="row">
		<prefix-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</prefix-query>
	</div>
	<!-- prefix query end -->

	<!-- multip_match query start -->
	<div [hidden]="query.selectedQuery != 'multi_match'" class="row">
		<multi_match-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</multi_match-query>
	</div>
	<!-- multip_match query end -->

	<!-- query_string query start -->
	<div [hidden]="query.selectedQuery != 'query_string'" class="row">
		<query_string-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</query_string-query>
	</div>
	<!-- query_string query end -->

	<!-- query_string query start -->
	<div [hidden]="query.selectedQuery != 'simple_query_string'" class="row">
		<simple_query_string-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</simple_query_string-query>
	</div>
	<!-- query_string query end -->

	<!-- exists query start -->
	<div [hidden]="query.selectedQuery != 'exists'" class="row">
		<exists-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</exists-query>
	</div>
	<!-- exists query end -->

	<!-- missing query start -->
	<div [hidden]="query.selectedQuery != 'missing'" class="row">
		<missing-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</missing-query>
	</div>
	<!-- missing query end -->

	<!-- wildcard query start -->
	<div [hidden]="query.selectedQuery != 'wildcard'" class="row">
		<wildcard-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</wildcard-query>
	</div>
	<!-- wildcard query end -->

	<!-- regexp query start -->
	<div [hidden]="query.selectedQuery != 'regexp'" class="row">
		<regexp-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</regexp-query>
	</div>
	<!-- regexp query end -->

	<!-- regexp query start -->
	<div [hidden]="query.selectedQuery != 'fuzzy'" class="row">
		<fuzzy-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</fuzzy-query>
	</div>
	<!-- regexp query end -->
	
	<!-- ids query start -->
	<div [hidden]="query.selectedQuery != 'ids'" class="row">
		<ids-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[selectedTypes]="selectedTypes"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</ids-query>
	</div>
	<!-- ids query end -->

	<!-- common query start -->
	<div [hidden]="query.selectedQuery != 'common'" class="row">
		<common-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</common-query>
	</div>
	<!-- common query end -->
	
	<!-- geo_distance query start -->
	<div [hidden]="query.selectedQuery != 'geo_distance'" class="row">
		<geo-distance-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geo-distance-query>
	</div>
	<!-- geo_distance query end -->

	<!-- geo_bounding_box query start -->
	<div [hidden]="query.selectedQuery != 'geo_bounding_box'" class="row">
		<geo-bounding-box-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geo-bounding-box-query>
	</div>
	<!-- geo_bounding_box query end -->

	<!-- geo_distance_range query start -->
	<div [hidden]="query.selectedQuery != 'geo_distance_range'" class="row">
		<geo-distance-range-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geo-distance-range-query>
	</div>
	<!-- geo_distance_range query end -->

	<!-- geo_polygon query start -->
	<div [hidden]="query.selectedQuery != 'geo_polygon'" class="row">
		<geo-polygon-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geo-polygon-query>
	</div>
	<!-- geo_polygon query end -->

	<!-- geohash_cell query start -->
	<div [hidden]="query.selectedQuery != 'geohash_cell'" class="row">
		<geohash-cell-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geohash-cell-query>
	</div>
	<!-- geohash_cell query end -->

	<!-- geo_shape query start -->
	<div [hidden]="query.selectedQuery != 'geo_shape'" class="row">
		<geo-shape-query
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</geo-shape-query>
	</div>
	<!-- geo_shape query end -->

	<!-- span_term query start -->
	<div [hidden]="query.selectedQuery != 'span_term'" class="row">
		<span-term-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</span-term-query>
	</div>
	<!-- span_term query end -->

	<!-- span_term query start -->
	<div [hidden]="query.selectedQuery != 'span_first'" class="row">
		<span-first-query 
			[appliedQuery]="query.appliedQuery"
			[queryList]="queryList"
			[selectedQuery]="query.selectedQuery"
			[selectedField]="query.selectedField"
			[querySelector]="querySelector" 
			(getQueryFormat)="getQueryFormat($event);"
			>
		</span-first-query>
	</div>
	<!-- span_term query end -->

	<!-- load the slector for selected query -->
</div>